<template>
  <div class="article-item" @mouseenter="isHover = true" @mouseleave="isHover = false">
    <div class="article-item__container" :class="[modelValue?.width ? `container-content-${modelValue?.width}` : 'container-content']">
      <h2 class="article-item__title" :class="[modelValue?.textType === 'center' ? 'text-center' : '']">
        {{ modelValue?.data?.title }}
      </h2>
      <div class="article-item__content mt-4" :class="[modelValue?.textType === 'center' ? 'text-center' : '']" v-html="modelValue?.data?.description"></div>
      <div class="article-item__link mt-4" :class="[modelValue?.textType === 'center' ? 'flex-center' : '']">
        <div class="article-item__link__col" v-for="item in modelValue?.data?.linkList" :key="item.id">
          <div class="circle-link">
            <!-- 如果链接包含 http 则使用 a 标签跳转 -->
            <a v-if="item.url && item.url.includes('http')" :href="item.url" class="nuxt-link-active">
              <div>{{ item.text }}</div>
              <span class="circle-link__icon"></span>
            </a>
            <!-- 否则使用 button 并 emit handleClick 事件 -->
            <button v-else @click="handleClick(item.url)" class="nuxt-link-active">
              <div>{{ item.text }}</div>
              <span class="circle-link__icon"></span>
            </button>
          </div>
        </div>
      </div>
    </div>

    <Operate v-if="!isPreview" v-model:show="isHover" @handle-edit="showSetting = true" @handle-delete="handleDelete" @handle-copy="handleCopy" @handlePaste="handlePaste"></Operate>
  </div>

  <Setting v-if="!isPreview" v-model:show="showSetting" :data="modelValue"></Setting>
</template>

<script lang="ts" setup> 
import { ref } from 'vue'
import { randomString } from '@/utils/common'
import Operate from '@/common/Operate/index.vue'
import Setting from './setting.vue'


// 定义组件名称
defineOptions({
  name: 'ArticleItem'
})

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {}
  },

  // 是否预览
  isPreview: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['update:modelValue', 'handleDelete', 'handleCopy', 'handlePaste', 'handleClick'])

const handleInit = () => {
  if (props.modelValue && props.modelValue.data) return // 有数据不用初始化
  const data = {
    id: props.modelValue?.id || randomString(),
    type: 'ArticleItem',
    width: '',
    textType: 'default',
    data: {
      title: 'About YWIES',
      description: '<p>家佛啊放假哦啊房间哦啊激发对哦金佛登记佛啊激发哦飞机奥啊金佛登记佛啊激发哦飞机奥</p>',
      linkList: [
        {
          id: randomString(),
          type: 'link',
          text: 'link',
          url: 'https://www.baidu.com',
          isExternal: false
        }
      ],
    }
  }
  emit('update:modelValue', data)
} 

const isHover = ref<boolean>(false);
const showSetting = ref<boolean>(false);

const handleDelete = () => {
  emit('handleDelete', props.modelValue.id)
}

const handleCopy = () => {
  emit('handleCopy', props.modelValue)
}

const handlePaste = (type: string) => {
  emit('handlePaste', type)
}

const handleClick = (url: string) => {
  emit('handleClick', url)
}

handleInit()
</script>

<style lang="scss" scoped>
.article-item {
  position: relative;
}

/* Migrated from global.scss / main.scss: local component copies to avoid global dependency */
.article-item {
  /* utility: center alignment */
  .flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .text-center {
    text-align: center;
  }

  /* spacing utility used by components (mt-4) */
  .mt-4 {
    margin-top: 16px;
  }

  /* circle-link styles (migrated subset) */
  .circle-link {
    display: flex;
    --link-color: #172386;
  }

  .circle-link a,.circle-link button {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.285;
    letter-spacing: .04em;
    border: none;
    background: none;
    color: var(--link-color);
    text-decoration: none;
    display: flex;
    align-items: center;
    padding: 0
  }

  @media(max-width: 1023.98px) {
    .circle-link a,.circle-link button {
        line-height:1.428
    }
  }

  @media(max-width: 767.98px) {
    .circle-link a,.circle-link button {
        line-height:1.285
    }
  }

  .circle-link a:hover .circle-link__icon:before,.circle-link button:hover .circle-link__icon:before {
    transform: translate(-50%,-50%)
  }

  .circle-link a:hover .circle-link__icon:after,.circle-link button:hover .circle-link__icon:after {
    transform: translate(150%,-50%)
  }

  .circle-link a:active .circle-link__icon:before,.circle-link button:active .circle-link__icon:before {
    transform: translate(-260%,-50%)
  }

  .circle-link a:active .circle-link__icon:after,.circle-link button:active .circle-link__icon:after {
    transform: translate(-50%,-50%)
  }

  .circle-link__icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--link-color);
    position: relative;
    margin-left: 7px;
    flex-shrink: 0
  }

  @media(max-width: 767.98px) {
    .circle-link__icon {
        width:12px;
        height: 12px;
        margin-left: 4px
    }
  }

  .circle-link__icon:after,.circle-link__icon:before {
    content: "";
    width: 6px;
    height: 9px;
    position: absolute;
    top: 50%;
    left: 55%;
    background-image: url();
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: hsla(0,0%,100%,0);
    transition: transform .3s ease-in-out
  }

  @media(max-width: 767.98px) {
    .circle-link__icon:after,.circle-link__icon:before {
        width:4.7px;
        height: 6px;
        background-image: url();
        background-position: 50%;
        background-size: cover;
        background-repeat: no-repeat;
        background-color: hsla(0,0%,100%,0)
    }
  }

  .circle-link__icon:before {
    transform: translate(-260%,-50%)
  }

  .circle-link__icon:after {
    transform: translate(-50%,-50%)
  }

/* 让 button 看起来像链接 */
.circle-link button.nuxt-link-active {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  font: inherit;
  width: 100%;
  text-align: left;
}

}

.article-item__title {
  color: #0032a0;
  color: var(--text-color--primary,#0032a0);
  font-size: 26px;
}

@media(max-width: 767.98px) {
  .article-item__title {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.5;
  }
}

@media(max-width: 767.98px)and (max-width:767.98px) {
  .article-item__title {
    font-size:20px;
    line-height: 1.2;
    letter-spacing: -.005em;
  }
}

.article-item__content {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  color: #1a1c20;
}

@media(max-width: 1023.98px) {
  .article-item__content {
    font-size: 14px;
    line-height: 1.714;
    letter-spacing: .01em;
  }
}

.article-item__content * {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  color: #1a1c20;
}

@media(max-width: 1023.98px) {
  .article-item__content * {
    font-size:14px;
    line-height: 1.714;
    letter-spacing: .01em;
  }
}

.article-item__content b,
.article-item__content strong {
  font-weight: 500;
  color: #0032a0;
}

.article-item__content h1,.article-item__content h1 * {
  font-size: 40px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .02em;
}

@media(max-width: 1023.98px) {
  .article-item__content h1,.article-item__content h1 * {
    font-size:32px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: .02em;
  }
}

@media(max-width: 767.98px) {
  .article-item__content h1,.article-item__content h1 * {
    font-size:24px;
    line-height: 1.09;
  }
}

.article-item__content h2,.article-item__content h2 * {
  font-size: 36px;
  line-height: 1.33;
  font-weight: 500;
}

@media(max-width: 1023.98px) {
  .article-item__content h2,.article-item__content h2 * {
    font-size: 26px;
    line-height: 1.2;
    font-weight: 700;
  }
}

@media(max-width: 767.98px) {
  .article-item__content h2,.article-item__content h2 * {
    font-size: 22px;
    line-height: 1.2;
    font-weight: 500;
  }
}

.article-item__content h3,.article-item__content h3 * {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.69;
  letter-spacing: .1em;
}

@media(max-width: 1023.98px) {
  .article-item__content h3,.article-item__content h3 * {
    font-size: 24px;
    line-height: 1;
  }
}

@media(max-width: 767.98px) {
  .article-item__content h3,.article-item__content h3 * {
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: .08em;
  }
}

.article-item__content h4,.article-item__content h4 * {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.5;
}

@media(max-width: 767.98px) {
  .article-item__content h4,.article-item__content h4 * {
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -.005em;
  }
}

.article-item__content h5,.article-item__content h5 * {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .1em;
}

@media(max-width: 1023.98px) {
  .article-item__content h5,.article-item__content h5 * {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.125;
    letter-spacing: .01em;
  }
}

@media(max-width: 767.98px) {
  .article-item__content h5,.article-item__content h5 * {
      font-weight:700;
      line-height: 1.25;
      letter-spacing: .06em;
  }
}

.article-item__content h6,.article-item__content h6 * {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.333;
}

@media(max-width: 1023.98px) {
  .article-item__content h6,.article-item__content h6 * {
      font-size:16px;
      line-height: 1.25;
      letter-spacing: .01em;
  }
}

@media(max-width: 767.98px) {
  .article-item__content h6,.article-item__content h6 * {
      line-height:1.5;
  }
}

.article-item__content h1 b,
.article-item__content h1 strong,
.article-item__content h2 b,
.article-item__content h2 strong,
.article-item__content h3 b,
.article-item__content h3 strong,
.article-item__content h4 b,
.article-item__content h4 strong,
.article-item__content h5 b,
.article-item__content h5 strong,
.article-item__content h6 b,
.article-item__content h6 strong {
  color: #0032a0;
  color: var(--text-color--primary,#0032a0);
}

.article-item__content a {
  color: #0048e8;
  text-decoration: none;
  background-image: linear-gradient(90deg,#0048e8,#0048e8);
  background-size: 0 1px,100% 1px;
  background-position: 0 100%,100% 100%;
  background-repeat: no-repeat;
  transition: background-size .3s;
  padding-bottom: 2px
}

.article-item__content a:focus,.article-item__content a:hover {
  background-size: 100% 1px,0 1px
}

.article-item__content ol:not(:last-child),.article-item__content ul:not(:last-child) {
  margin-bottom: 16px
}

.article-item__content ol:not(:first-child),.article-item__content ul:not(:first-child) {
  margin-top: 16px
}

.article-item__content ol>li,.article-item__content ul>li {
  position: relative;
  padding-left: 1.6em
}

.article-item__content ul>li:before {
  content: "";
  position: absolute;
  top: .7em;
  left: .5em;
  width: 5px;
  height: 5px;
  background: #000;
  border-radius: 50%
}

.article-item__content ol {
  counter-reset: section;
  list-style-type: none
}

.article-item__content ol>li {
  list-style-type: none;
  position: relative
}

.article-item__content ol>li:before {
  counter-increment: section;
  content: counters(section,".") ".";
  position: absolute;
  top: 0;
  left: 0;
  background: none
}

.article-item__content img {
  width: 100%
}

.article-item__content em {
  font-style: italic
}

.article-item__content table.scrollable {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-color: #0032a0 #e4e4e6;
  scrollbar-width: thin
}

.article-item__content table.scrollable::-webkit-scrollbar-track {
  border-radius: 8px;
  background-color: #e4e4e6
}

.article-item__content table.scrollable::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background-color: #0032a0
}

.article-item__content table.scrollable::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: #0032a0
}

@media(max-width: 575.98px) {
  .article-item__content table.scrollable-sm {
      display:block;
      overflow-x: auto;
      white-space: nowrap;
      scrollbar-color: #0032a0 #e4e4e6;
      scrollbar-width: thin
  }

  .article-item__content table.scrollable-sm::-webkit-scrollbar-track {
      border-radius: 8px;
      background-color: #e4e4e6
  }

  .article-item__content table.scrollable-sm::-webkit-scrollbar {
      width: 8px;
      height: 8px;
      border-radius: 8px;
      background-color: #0032a0
  }

  .article-item__content table.scrollable-sm::-webkit-scrollbar-thumb {
      border-radius: 8px;
      background-color: #0032a0
  }
}

@media(max-width: 767.98px) {
  .article-item__content table.scrollable-md {
      display:block;
      overflow-x: auto;
      white-space: nowrap;
      scrollbar-color: #0032a0 #e4e4e6;
      scrollbar-width: thin
  }

  .article-item__content table.scrollable-md::-webkit-scrollbar-track {
      border-radius: 8px;
      background-color: #e4e4e6
  }

  .article-item__content table.scrollable-md::-webkit-scrollbar {
      width: 8px;
      height: 8px;
      border-radius: 8px;
      background-color: #0032a0
  }

  .article-item__content table.scrollable-md::-webkit-scrollbar-thumb {
      border-radius: 8px;
      background-color: #0032a0
  }
}

@media(max-width: 1023.98px) {
  .article-item__content table.scrollable-lg {
      display:block;
      overflow-x: auto;
      white-space: nowrap;
      scrollbar-color: #0032a0 #e4e4e6;
      scrollbar-width: thin
  }

  .article-item__content table.scrollable-lg::-webkit-scrollbar-track {
      border-radius: 8px;
      background-color: #e4e4e6
  }

  .article-item__content table.scrollable-lg::-webkit-scrollbar {
      width: 8px;
      height: 8px;
      border-radius: 8px;
      background-color: #0032a0
  }

  .article-item__content table.scrollable-lg::-webkit-scrollbar-thumb {
      border-radius: 8px;
      background-color: #0032a0
  }
}

@media(max-width: 1279.98px) {
  .article-item__content table.scrollable-xl {
      display:block;
      overflow-x: auto;
      white-space: nowrap;
      scrollbar-color: #0032a0 #e4e4e6;
      scrollbar-width: thin
  }

  .article-item__content table.scrollable-xl::-webkit-scrollbar-track {
      border-radius: 8px;
      background-color: #e4e4e6
  }

  .article-item__content table.scrollable-xl::-webkit-scrollbar {
      width: 8px;
      height: 8px;
      border-radius: 8px;
      background-color: #0032a0
  }

  .article-item__content table.scrollable-xl::-webkit-scrollbar-thumb {
      border-radius: 8px;
      background-color: #0032a0
  }
}

.article-item__content table:not(.table-striped) tr {
  background-color: #fff
}

.article-item__content table:not(.table-striped) tr td {
  padding: 8px 32px 8px 16px;
  vertical-align: middle;
  line-height: 1.25
}

@media(max-width: 767.98px) {
  .article-item__content table:not(.table-striped) tr td {
      padding:10px 8px
  }
}

.article-item__content table:not(.table-striped) tr td:first-child:not(:only-child) {
  background-color: #f2f8ff
}

.article-item__content table:not(.table-striped) tr th {
  background-color: #0032a0;
  background-color: var(--text-color--secondary,#0032a0);
  color: #fff;
  padding: 8px 32px 8px 16px;
  vertical-align: middle
}

@media(max-width: 767.98px) {
  .article-item__content table:not(.table-striped) tr th {
      height:34px;
      padding: 8px 12px
  }
}

.article-item__content table:not(.table-striped) tr th *,.article-item__content table:not(.table-striped) tr th b,.article-item__content table:not(.table-striped) tr th em,.article-item__content table:not(.table-striped) tr th p,.article-item__content table:not(.table-striped) tr th strong {
  color: #fff
}

.article-item__content table:not(.table-striped) tr th p {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.33
}

@media(max-width: 1023.98px) {
  .article-item__content table:not(.table-striped) tr th p {
      font-size:16px;
      line-height: 1.25;
      letter-spacing: .01em
  }
}

@media(max-width: 767.98px) {
  .article-item__content table:not(.table-striped) tr th p {
      line-height:1.5;
      font-size: 16px;
      font-weight: 400;
      line-height: 1.25;
      letter-spacing: .01em
  }
}

@media(max-width: 767.98px)and (max-width:1023.98px) {
  .article-item__content table:not(.table-striped) tr th p {
      font-size:14px;
      line-height: 1.285;
      letter-spacing: .01em
  }
}

.article-item__content table.table-striped tr:nth-child(2n) {
  background-color: #f2f8ff
}

.article-item__content table.table-striped tr:nth-child(odd) {
  background-color: #fff
}

.article-item__content table.table-striped tr:first-child {
  background-color: #0032a0;
  background-color: var(--text-color--secondary,#0032a0)
}

.article-item__content table.table-striped th {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: .01em;
  padding: 8px 36px;
  color: #fff
}

@media(max-width: 1023.98px) {
  .article-item__content table.table-striped th {
      font-size:14px;
      line-height: 1.285;
      letter-spacing: .01em;
      padding: 8px 16px
  }
}

@media(max-width: 767.98px) {
  .article-item__content table.table-striped th {
      padding:8px
  }
}

.article-item__content table.table-striped td {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  padding: 13.5px 36px;
  color: #1a1c20
}

@media(max-width: 1023.98px) {
  .article-item__content table.table-striped td {
      font-size:14px;
      line-height: 1.714;
      letter-spacing: .01em;
      padding: 12px 16px
  }
}

@media(max-width: 767.98px) {
  .article-item__content table.table-striped td {
      padding:10px 8px
  }
}

.article-item__content .column-1 {
  -moz-column-count: 1;
  column-count: 1;
  grid-column-gap: 80px;
  -moz-column-gap: 80px;
  column-gap: 80px
}

.article-item__content .column-1>* {
  -moz-column-break-inside: avoid;
  break-inside: avoid-column
}

.article-item__content .column-2 {
  -moz-column-count: 2;
  column-count: 2;
  grid-column-gap: 80px;
  -moz-column-gap: 80px;
  column-gap: 80px
}

.article-item__content .column-2>* {
  -moz-column-break-inside: avoid;
  break-inside: avoid-column
}

.article-item__content .column-3 {
  -moz-column-count: 3;
  column-count: 3;
  grid-column-gap: 80px;
  -moz-column-gap: 80px;
  column-gap: 80px
}

.article-item__content .column-3>* {
  -moz-column-break-inside: avoid;
  break-inside: avoid-column
}

.article-item__content .column-4 {
  -moz-column-count: 4;
  column-count: 4;
  grid-column-gap: 80px;
  -moz-column-gap: 80px;
  column-gap: 80px
}

.article-item__content .column-4>* {
  -moz-column-break-inside: avoid;
  break-inside: avoid-column
}

@media(min-width: 768px) {
  .article-item__content .column-tablet-1 {
      -moz-column-count:1;
      column-count: 1;
      grid-column-gap: 80px;
      -moz-column-gap: 80px;
      column-gap: 80px
  }

  .article-item__content .column-tablet-1>* {
      -moz-column-break-inside: avoid;
      break-inside: avoid-column
  }
}

@media(min-width: 768px) {
  .article-item__content .column-tablet-2 {
      -moz-column-count:2;
      column-count: 2;
      grid-column-gap: 80px;
      -moz-column-gap: 80px;
      column-gap: 80px
  }

  .article-item__content .column-tablet-2>* {
      -moz-column-break-inside: avoid;
      break-inside: avoid-column
  }
}

@media(min-width: 768px) {
  .article-item__content .column-tablet-3 {
      -moz-column-count:3;
      column-count: 3;
      grid-column-gap: 80px;
      -moz-column-gap: 80px;
      column-gap: 80px
  }

  .article-item__content .column-tablet-3>* {
      -moz-column-break-inside: avoid;
      break-inside: avoid-column
  }
}

@media(min-width: 768px) {
  .article-item__content .column-tablet-4 {
      -moz-column-count:4;
      column-count: 4;
      grid-column-gap: 80px;
      -moz-column-gap: 80px;
      column-gap: 80px
  }

  .article-item__content .column-tablet-4>* {
      -moz-column-break-inside: avoid;
      break-inside: avoid-column
  }
}

@media(min-width: 1280px) {
  .article-item__content .column-desktop-1 {
      -moz-column-count:1;
      column-count: 1;
      grid-column-gap: 80px;
      -moz-column-gap: 80px;
      column-gap: 80px
  }

  .article-item__content .column-desktop-1>* {
      -moz-column-break-inside: avoid;
      break-inside: avoid-column
  }
}

@media(min-width: 1280px) {
  .article-item__content .column-desktop-2 {
      -moz-column-count:2;
      column-count: 2;
      grid-column-gap: 80px;
      -moz-column-gap: 80px;
      column-gap: 80px
  }

  .article-item__content .column-desktop-2>* {
      -moz-column-break-inside: avoid;
      break-inside: avoid-column
  }
}

@media(min-width: 1280px) {
  .article-item__content .column-desktop-3 {
      -moz-column-count:3;
      column-count: 3;
      grid-column-gap: 80px;
      -moz-column-gap: 80px;
      column-gap: 80px
  }

  .article-item__content .column-desktop-3>* {
      -moz-column-break-inside: avoid;
      break-inside: avoid-column
  }
}

@media(min-width: 1280px) {
  .article-item__content .column-desktop-4 {
      -moz-column-count:4;
      column-count: 4;
      grid-column-gap: 80px;
      -moz-column-gap: 80px;
      column-gap: 80px
  }

  .article-item__content .column-desktop-4>* {
      -moz-column-break-inside: avoid;
      break-inside: avoid-column
  }
}

.article-item__link {
  display: flex;
  margin-left: -20px;
  margin-right: -20px;
  margin-top: -12px
}

@media(max-width: 767.98px) {
  .article-item__link {
      margin-left:-8px;
      margin-right: -8px;
      margin-top: -12px
  }
}

.article-item__link__col {
  padding-left: 20px;
  padding-right: 20px;
  margin-top: 12px
}

@media(max-width: 767.98px) {
  .article-item__link__col {
      padding-left:8px;
      padding-right: 8px
  }
}

.article-item__btn {
  display: flex;
  flex-wrap: wrap;
  margin-left: -8px;
  margin-right: -8px;
  margin-top: -12px
}

@media(max-width: 767.98px) {
  .article-item__btn {
      flex-direction:column;
      align-items: flex-start
  }
}

.article-item__btn__col {
  padding-left: 8px;
  padding-right: 8px;
  margin-top: 12px
}

.article-item--is-smaller .article-item__title {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .01em
}

@media(max-width: 1023.98px) {
  .article-item--is-smaller .article-item__title {
      line-height:1.25;
      letter-spacing: .04em
  }
}

@media(max-width: 767.98px) {
  .article-item--is-smaller .article-item__title {
      font-size:14px;
      line-height: 1.285;
      letter-spacing: .02em
  }
}

.article-item--is-smaller .article-item__content {
  margin-top: 8px
}

@media(max-width: 767.98px) {
  .article-item--is-smaller .article-item__content {
      margin-top:12px
  }
}
</style>
